<template>
  <div class="vr-login-mask" :class="{ none: userLoginMesk.Mesk }">
    <div class="vr-login-container" :class="{ rightPanelActive: PanelActive }">
      <div class="close pointer" @click="userLoginMesk.meskBtn">
        <el-icon><CloseBold /></el-icon>
      </div>
      <div class="sign-up-container">
        <div class="resetPassword">
          <h1 class="title">找回密码</h1>
          <el-steps :active="active" finish-status="success" align-center :space="150" class="Esteps">
            <el-step title="获取验证码" :icon="EditPen"></el-step>
            <el-step title="设置新密码" :icon="Promotion"></el-step>
            <el-step title="修改完成" :icon="Key"></el-step>
          </el-steps>

          <div class="reset">
            <el-form v-if="active === 0">
              <el-form-item prop="email" label="邮箱">
                <el-input placeholder="请输入邮箱账号" v-model="EmailInput" />
              </el-form-item>
            </el-form>
          </div>
          <div class="reset">
            <el-form v-if="active === 1">
              <p>验证码已经发送到1023311759@qq.com的邮箱请注意查收</p>
              <el-form-item prop="email" label="用户邮箱" label-width="100px" label-position="left">
                <el-input placeholder="请输入邮箱账号" v-model="EmailInput" />
              </el-form-item>
              <el-form-item prop="number" label="验证码" label-width="100px" label-position="left">
                <el-input placeholder="请输入验证码" v-model="EmailInput" />
              </el-form-item>
              <el-form-item label="新密码" prop="password" label-width="100px" label-position="left">
                <el-input type="password" show-password placeholder="请输入您的新密码" v-model="EmailInput" />
              </el-form-item>
              <el-form-item label="确认新密码" prop="password" label-width="100px" label-position="left">
                <el-input type="password" show-password placeholder="请确认您的新密码" v-model="EmailInput" />
              </el-form-item>
              <div class="btn-flex">
                <el-button type="primary" round class="loginBtn" size="large">下一步</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div class="sign-in-container from-container">
        <div class="vr-login-from">
          <h1 class="title">登录</h1>
          <div class="login-tab-wp">
            <div class="login-tab-item pointer">
              <span class="iconfont icon-email"></span>
              邮箱
            </div>
            <div class="line"></div>
            <div class="login-tab-item pointer">
              <span class="iconfont icon-card"></span>
              <span>借书证</span>
            </div>
          </div>
          <div class="Email-login">
            <el-form>
              <el-form-item prop="email">
                <el-input placeholder="邮箱地址" v-model="EmailInput" />
              </el-form-item>

              <el-form-item prop="password">
                <el-input type="password" show-password placeholder="登录密码" v-model="EmailPass" />
              </el-form-item>
              <el-form-item prop="email">
                <el-input placeholder="邮箱地址" v-model="EmailInput" />
              </el-form-item>

              <div class="btn-flex">
                <el-button type="primary" round class="loginBtn" size="large">登录</el-button>
              </div>
            </el-form>
          </div>
          <div class="Card-login" v-show="false">
            <el-form>
              <el-form-item prop="cardId">
                <el-input placeholder="借阅证" v-model="CardInput" />
              </el-form-item>

              <el-form-item prop="password">
                <el-input type="password" show-password placeholder="借阅证密码" v-model="CardPass" />
              </el-form-item>
              <div class="btn-flex">
                <el-button type="primary" round class="loginBtn" size="large">登录</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>欢迎回来</h1>
            <p>请使用你个人信息登录</p>
            <div>
              <el-button round class="btnStyle" size="large" @click="actBtn">登录</el-button>
            </div>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>Hello, Friend</h1>
            <p>如果忘记可以点击找回密码</p>
            <div>
              <el-button round class="btnStyle" size="large" @click="actBtn">忘记密码</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { EditPen, Promotion, Key, CloseBold } from '@element-plus/icons-vue';
import { userLogin } from '@/stores/modules/loginData';
const EmailInput = ref('');
const EmailPass = ref('');
const CardInput = ref('');
const CardPass = ref('');
const active = ref(0);
const PanelActive = ref<boolean>(false);
const userLoginMesk = userLogin();

const actBtn = () => {
  PanelActive.value = !PanelActive.value;
};
onMounted(() => {});
</script>
<style scoped lang="scss">
.vr-login-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10010;
  @include center;
  .vr-login-container {
    display: flex;
    width: 768px;
    min-height: 480px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgb(0 0 0/25%), 0 10px 10px rgb(0 0 0/22%);
    position: relative;
    .title {
      font-weight: bold;
      font-size: 30px;
      margin-bottom: 20px;
    }
    .sign-in-container {
      // @include center;
      // flex-direction: column;
      // width: 50%;
      left: 0;
      width: 50%;
      z-index: 1;
      background: #fff;
      .vr-login-from {
        @include center;
        flex-direction: column;
        padding: 0 50px;
        height: 100%;
        text-align: center;
        .login-tab-wp {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .login-tab-item {
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 25px;
            }
          }
        }
        .sign-in-title {
          span {
            font-size: 40px;
            font-weight: bold;
          }
        }

        .Email-login {
          width: 250px;

          .clickable {
            text-align: center;
            margin-bottom: 20px;
          }
        }
      }
    }

    .from-container {
      position: absolute;
      top: 0;
      height: 100%;
      transition: all 0.6s ease-in-out;
      border-radius: 10px;
    }
    .sign-up-container {
      left: 0;
      width: 50%;
      opacity: 0;
      z-index: 1;
      border-radius: 10px;
      .resetPassword {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        text-align: center;

        .Esteps {
          margin-top: 20px;
        }
        .reset {
          padding: 0 50px;
          p {
            font-size: 14px;
            margin: 20px 0;
            line-height: 20px;
          }
        }
      }
    }
  }
  .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    z-index: 100;
    .overlay {
      background: linear-gradient(to right, #1cd8d2, #64acff);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0 0;
      color: #fff;
      position: relative;
      left: -100%;
      height: 100%;
      width: 200%;
      transform: translateX(0);
      transition: transform 0.6s ease-in-out;
      border-radius: 10px;
      .overlay-panel {
        position: absolute;
        @include center;
        flex-direction: column;
        padding: 0 40px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        width: 50%;
        height: 100%;
        transform: translateX(0);
        transition: all 0.6s;
        h1 {
          font-size: 40px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        div {
          margin-top: 20px;
        }
      }
      .overlay-left {
        transform: translateX(-20%);
      }
      .overlay-right {
        right: 0;
        transform: translateX(0);
      }
    }
  }
  .vr-login-container {
    &.rightPanelActive {
      .sign-in-container {
        transform: translateX(100%);
      }
      .sign-up-container {
        background: #fff;
        transform: translateX(100%);
        opacity: 1;
        z-index: 5;
        animation: identifier 0.6s;
      }
      .overlay-container {
        transform: translateX(-100%);
      }
      .overlay {
        transform: translateX(50%);
      }
      .overlay-left {
        transform: translateX(0);
      }
      .overlay-right {
        transform: translateX(20%);
      }
    }
  }
  @keyframes identifier {
    0%,
    49.99% {
      opacity: 0;
      z-index: 1;
    }
    50%,
    100% {
      opacity: 1;
      z-index: 5;
    }
  }
  .btn-flex {
    @include center;
    .loginBtn {
      width: 150px;
    }
  }
  .line {
    width: 1px;
    height: 19px;
    margin: 0 10px;
    background: #aba5a5;
  }
  .btnStyle {
    width: 120px;
  }
  .close {
    position: absolute;
    z-index: 101;
    top: 10px;
    right: 25px;
  }
}
</style>
